$baseFontSize : 40px !default;
$red : #D71345 !default;
$opacity: 1 !default;
@function rem($px) {
  @return $px / $baseFontSize * 1rem;
}
@mixin displayflex{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
@mixin flex($size:1){
  -webkit-box-flex:$size;
  -moz-box-flex:$size;
  -webkit-flex:$size;
  -ms-flex:$size;
  flex:$size;
}
@mixin flexflowCol($direction:column,$dir:vertical){
  -webkit-box-orient:$dir;
  -ms-box-orient: $dir;
  -moz-box-orient: $dir;
  -webkit-flex-flow:$direction nowrap;
  -ms-flex-flow:$direction nowrap;
  -moz-flex-flow:$direction nowrap;
  flex-flow:$direction nowrap;
}
@mixin flexflowRow($direction:row,$dir:horizontal) {
  -webkit-box-orient:$dir;
  -ms-box-orient: $dir;
  -moz-box-orient: $dir;
  -webkit-flex-flow:$direction nowrap;
  -ms-flex-flow:$direction nowrap;
  -moz-flex-flow:$direction nowrap;
  flex-flow:$direction nowrap;
}
@mixin shadow($x:0,$y:0px,$z:5px,$color:#bdbdbd) {
  box-shadow : $x $y $z $color;
  -webkit-box-shadow:  $x $y $z $color;
  -moz-box-shadow:  $x $y $z $color;
}
*{
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color:rgba(255,255,255,0);
  font-family: Helvetica, sans-serif;
  -webkit-touch-callout: none;
  box-sizing: border-box;
}
a:active,a:hover,a:link,a:visited{
  text-decoration: none;
  outline: none;
}
html,body{
  width: 100%;
  height: 100%;
  font-size: 20px;
}
.pages,.page{
  top:0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  position: absolute;
}
.page-dui{
  background-color: #f7f3e7;
  font-size: 0;
  .page-content{
    position: absolute;
    overflow: hidden;
    left:8px;
    top:8px;
  }
  .bg{
    position: absolute;
    width: 100%;
    z-index:1;
  }
  .font-dui{
    position: absolute;
    width: rem(506px);
    height: rem(508px);
    top: 2rem;
    left: 50%;
    margin-left: rem(-253px);
    z-index: 5;
    .font {
      width: 100%;
    }
    .rotate-icon {

    }
  }
}